<template>
  <div class="body">
    <p class="title">员工管理</p>
    <!-- 按钮盒子 -->
    <div class="btn_box">
      <el-badge :value="data.filter(item => item.status === 1).length" :max="999" class="item"
        @click="pageData = data.filter(item => item.status === 1)">
        <el-button size="small" class="btn_size">入职</el-button>
      </el-badge>
      <el-badge :value="data.filter(item => item.status === 2).length" class="item btn_size"
        @click="pageData = data.filter(item => item.status === 2)">
        <el-button size="small" class="btn_size btn_item">离职</el-button>
      </el-badge>
      <el-badge :value="data.filter(item => item.layout == 1).length" :max="999" class="item"
        @click="pageData = data.filter(item => item.layout == 1)">
        <el-button size="small" class="btn_size">长期派遣</el-button>
      </el-badge>
      <el-badge :value="data.filter(item => item.layout == 2).length" :max="999" class="item"
        @click="pageData = data.filter(item => item.layout == 2)">
        <el-button size="small" class="btn_size">短期派遣</el-button>
      </el-badge>
      <el-badge :value="data.filter(item => item.layout == 3).length" :max="999" class="item"
        @click="pageData = data.filter(item => item.layout == 3)">
        <el-button size="small" class="btn_size">学员</el-button>
      </el-badge>
      <el-badge :value="repeat.length" class="item" @click="pageData = repeat;">
        <el-button size="small" class="btn_size">重复人员</el-button>
      </el-badge>
      <el-badge class="item" @click="pageData = data">
        <el-button size="small" class="btn_size">重置</el-button>
      </el-badge>
      <div class="btn_box_btn">
        <el-button type="danger" @click="deletePopShow">批量删除</el-button>
        <el-button type="success">导出员工</el-button>
        <el-button type="primary">导入员工</el-button>
      </div>
    </div>
    <!-- 输入框内容 -->
    <div class="search_box">
      <div class="input_box">
        <el-input v-model="name" class="element_input" placeholder="请输入员工姓名" @input="searchData"></el-input>
        <el-select class="element_select" @change="searchData" v-model="company" :clearable="true" placeholder="请选择公司">
          <el-option v-for="item in companyData" :key="item.id" :label="item.account" :value="item.account">
          </el-option>
        </el-select>
        <el-input v-model="itemName" class="element_input" placeholder="请输入项目名称" @input="searchData"></el-input>
        <el-tree-select v-model="grade" :data="treeData" placeholder="请输入档级" :render-after-expand="false"
          :clearable="true" style="width: 170px" @change="searchData" />
        <el-select class="element_select" :clearable="true" v-model="certSearch" @change="searchData"
          placeholder="请选择证书">
          <el-option v-for="item in certclass" :key="item.id" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
        <el-date-picker v-model="month" type="month" placeholder="选择月份" @visible-change="searchData" />
      </div>
      <el-button type="primary" class="new_btn" @click="append(formRef)">新增</el-button>
    </div>
    <!-- 表格内容 -->
    <el-table :data="pageCount" border="1px solid black" stripe="boolean" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column fixed="left" type="selection" width="55" align="center"></el-table-column>
      <el-table-column fixed="left" prop="name" label="姓名" width="80" align="center">
        <template #default="scope">
          <span @click="locker(scope.row)" class="user_name">
            {{ scope.row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="left" prop="base_pay" label="岗位工资" width="120" align="center"></el-table-column>
      <el-table-column fixed="left" prop="grade_title" label="岗位档级" width="100" align="center"></el-table-column>
      <el-table-column prop="sex" label="性别" width="80" align="center"></el-table-column>
      <el-table-column prop="birthday" label="生日" width="130" align="center"></el-table-column>
      <el-table-column prop="tel" label="手机号" width="150" align="center"></el-table-column>
      <el-table-column prop="idcard" label="身份证号" width="180" align="center"></el-table-column>
      <el-table-column prop="title" label="项目名称" width="150" align="center"></el-table-column>
      <el-table-column prop="account" label="公司名称" width="100" align="center"></el-table-column>
      <el-table-column prop="political_status" label="政治面貌" width="90" align="center"></el-table-column>
      <el-table-column prop="address" label="籍贯" width="120" align="center"></el-table-column>
      <el-table-column prop="record" label="学历" width="80" align="center"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="150" align="center"></el-table-column>
      <el-table-column prop="status" label="员工状态" width="100" align="center">
        <template #default="scope">
          {{ scope.row.status === 1 ? '在职' : '离职' }}
        </template>
      </el-table-column>
      <el-table-column prop="" label="用工形式" width="100" align="center"></el-table-column>
      <el-table-column prop="entry_time" label="入职时间" width="120" align="center"></el-table-column>
      <el-table-column prop="" label="合同时间区间" width="120" align="center"></el-table-column>
      <el-table-column prop="leave_time" label="离职时间" width="120" align="center"></el-table-column>
      <el-table-column prop="" label="现合同期限" width="120" align="center"></el-table-column>
      <el-table-column prop="bank_card" label="银行卡号" width="200" align="center"></el-table-column>
      <el-table-column prop="bank" label="工资卡开户行" width="300" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120" align="center">
        <el-dropdown>
          <span class="el-dropdown-link">
            操作<i class="ele-ArrowDown"></i>
          </span>
        </el-dropdown>
      </el-table-column>
    </el-table>
    <div class="page_box">
      <el-pagination @size-change="pageNum" @current-change="pageChange" :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100, 200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.length" />
    </div>
    <div class="bottom_box"></div>
    <!-- 添加弹窗 -->
    <el-dialog v-model="dialogVisible" title="添加" width="900px">
      <el-form ref="formRef" style="max-width: 100%" :model="employeeForm" label-width="auto" label-position="top"
        :rules="formRules">
        <div class="form-row">
          <!-- 姓名输入框 -->
          <el-form-item prop="name" class="form-item">
            <span class="required-mark">*</span>
            <span>姓名</span>
            <el-input v-model="employeeForm.name" placeholder="请输入姓名" clearable maxlength="11" />
          </el-form-item>
          <div class="space"></div>
          <!-- 手机号输入框 -->
          <el-form-item prop="phone" class="form-item">
            <span class="required-mark">*</span>
            <span>手机号</span>
            <el-input v-model="employeeForm.phone" placeholder="请输入手机号" clearable maxlength="11" />
          </el-form-item>
          <div class="space"></div>
          <!-- 证件号码输入框 -->
          <el-form-item prop="idNumber" class="form-item">
            <span class="required-mark">*</span>
            <span>证件号码</span>
            <el-input v-model="employeeForm.idNumber" placeholder="请输入证件号码" clearable maxlength="18"
              @change="handleIdNumberBlur" />
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 性别 -->
          <el-form-item prop="gender" class="form-item">
            <span class="required-mark">*</span>
            <span>性别</span>
            <el-select v-model="employeeForm.gender" :disabled="true" placeholder="输入身份证号自动填充" clearable>
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <div class="space"></div>
          <!-- 生日 -->
          <el-form-item prop="birthday" class="form-item">
            <span class="required-mark">*</span>
            <span>生日</span>
            <el-date-picker v-model="employeeForm.birthday" type="date" placeholder="输入身份证号自动填充" :disabled="true"
              style="width: 100%" />
          </el-form-item>
          <div class="space"></div>
          <!-- 籍贯 -->
          <el-form-item prop="hometown" class="form-item">
            <span class="required-mark">*</span>
            <span>籍贯</span>
            <el-input v-model="employeeForm.hometown" placeholder="请输入证件籍贯" clearable />
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 岗位档级 -->
          <el-form-item prop="positionLevel" class="form-item">
            <span class="required-mark">*</span>
            <span>岗位档级</span>
            <el-tree-select v-model="employeeForm.positionLevel" :data="treeData" placeholder="请选择档级"
              :render-after-expand="false" clearable style="width:100%;" @change="laborage" />
          </el-form-item>
          <div class="space"></div>
          <!-- 岗位工资 -->
          <el-form-item prop="salary" class="form-item">
            <span class="required-mark">*</span>
            <span>岗位工资</span>
            <el-input v-model="employeeForm.salary" placeholder="选择档级自动填充" :disabled="true" />
          </el-form-item>
          <div class="space"></div>
          <!-- 学历 -->
          <el-form-item prop="education" class="form-item">
            <span class="required-mark">*</span>
            <span>学历</span>
            <el-select v-model="employeeForm.education" clearable placeholder="请选择学历">
              <el-option label="初中及以下" value="初中及以下" />
              <el-option label="高中/中专" value="高中/中专" />
              <el-option label="大专" value="大专" />
              <el-option label="本科" value="本科" />
              <el-option label="研究生" value="研究生" />
              <el-option label="博士" value="博士" />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 开户行 -->
          <el-form-item prop="Bank" class="form-item">
            <span class="required-mark">*</span>
            <span>开户行</span>
            <el-input v-model="employeeForm.Bank" placeholder="请输入开户行" /><!-- -->
          </el-form-item>
          <div class="space"></div>
          <!-- 银行卡号 -->
          <el-form-item prop="bankCard" class="form-item">
            <span class="required-mark">*</span>
            <span>银行卡号</span>
            <el-input v-model="employeeForm.bankCard" placeholder="输入银行卡号" maxlength="19" />
          </el-form-item>
          <div class="space"></div>
          <!-- 政治面貌 -->
          <el-form-item prop="Political" class="form-item">
            <span class="required-mark">*</span>
            <span>政治面貌</span>
            <el-select v-model="employeeForm.Political" clearable placeholder="请选择政治面貌">
              <el-option label="群众" value="群众" />
              <el-option label="团员" value="团员" />
              <el-option label="党员" value="党员" />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 公司 -->
          <el-form-item prop="company" class="form-item">
            <span class="required-mark">*</span>
            <span>公司</span>
            <el-select class="" v-model="employeeForm.company" :clearable="true" placeholder="请选择公司">
              <el-option v-for="item in companyData" :key="item.id" :label="item.account" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="space"></div>
          <!-- 项目 -->
          <el-form-item prop="Item" class="form-item">
            <span class="required-mark">*</span>
            <span>项目</span>
            <el-select class="" v-model="employeeForm.Item" :clearable="true" placeholder="请选择项目">
              <el-option v-for="item in itemList" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="space"></div>
          <!-- 用工形式 -->
          <el-form-item prop="employment" class="form-item">
            <span class="required-mark">*</span>
            <span>用工形式</span>
            <el-select v-model="employeeForm.employment" clearable placeholder="请选择用工形式">
              <el-option label="长期派遣" value="1"></el-option>
              <el-option label="短期派遣" value="2"></el-option>
              <el-option label="学员" value="3"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 员工状态 -->
          <el-form-item prop="staffStatus" class="form-item">
            <span class="required-mark">*</span>
            <span>员工状态</span>
            <el-select v-model="employeeForm.staffStatus" clearable placeholder="请选择员工状态">
              <el-option label="在岗" value="1"></el-option>
              <el-option label="离职" value="2"></el-option>
            </el-select>
          </el-form-item>
          <div class="space"></div>
          <!-- 合同到期时间 -->
          <el-form-item prop="expire" class="form-item">
            <span class="required-mark">*</span>
            <span>合同到期时间</span>
            <el-date-picker v-model="employeeForm.expire" type="date" placeholder="请选择合同到期时间" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD" style="width: 100%" />
          </el-form-item>
          <div class="space"></div>
          <!-- 合同期限 -->
          <el-form-item prop="deadline" class="form-item">
            <span class="required-mark">*</span>
            <span>现合同期限（年）</span>
            <el-input v-model="employeeForm.deadline" placeholder="请输入合同期限" />
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 入职时间 -->
          <el-form-item prop="Onboarding" class="form-item">
            <span class="required-mark">*</span>
            <span>入职时间</span>
            <el-date-picker v-model="employeeForm.Onboarding" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              placeholder="请选择入职时间" style="width: 100%" />
          </el-form-item>
          <div class="space"></div>
          <!-- 离职时间 -->
          <el-form-item prop="dimission" class="form-item">
            <span class="required-mark">*</span>
            <span>离职时间</span>
            <el-date-picker v-model="employeeForm.dimission" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              placeholder="请选择合同到期时间" style="width: 100%" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(formRef)">
            确认添加
          </el-button>
          <el-button @click="resetForm(formRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editStatus" title="编辑" width="900px">
      <el-form ref="editFormRef" style="max-width: 100%" :model="employeeForm" label-width="auto" label-position="top"
        :rules="formRules">
        <div class="form-row">
          <!-- 姓名输入框 -->
          <el-form-item prop="name" class="form-item">
            <span class="required-mark">*</span>
            <span>姓名</span>
            <el-input v-model="employeeForm.name" placeholder="请输入姓名" clearable maxlength="11" />
          </el-form-item>
          <div class="space"></div>
          <!-- 手机号输入框 -->
          <el-form-item prop="phone" class="form-item">
            <span class="required-mark">*</span>
            <span>手机号</span>
            <el-input v-model="employeeForm.phone" placeholder="请输入手机号" clearable maxlength="11" />
          </el-form-item>
          <div class="space"></div>
          <!-- 证件号码输入框 -->
          <el-form-item prop="idNumber" class="form-item">
            <span class="required-mark">*</span>
            <span>证件号码</span>
            <el-input v-model="employeeForm.idNumber" placeholder="请输入证件号码" clearable maxlength="18"
              @change="handleIdNumberBlur" />
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 性别 -->
          <el-form-item prop="gender" class="form-item">
            <span class="required-mark">*</span>
            <span>性别</span>
            <el-select v-model="employeeForm.gender" :disabled="true" placeholder="输入身份证号自动填充" clearable>
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <div class="space"></div>
          <!-- 生日 -->
          <el-form-item prop="birthday" class="form-item">
            <span class="required-mark">*</span>
            <span>生日</span>
            <el-date-picker v-model="employeeForm.birthday" type="date" placeholder="输入身份证号自动填充" :disabled="true"
              style="width: 100%" />
          </el-form-item>
          <div class="space"></div>
          <!-- 籍贯 -->
          <el-form-item prop="hometown" class="form-item">
            <span class="required-mark">*</span>
            <span>籍贯</span>
            <el-input v-model="employeeForm.hometown" placeholder="请输入证件籍贯" clearable />
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 岗位档级 -->
          <el-form-item prop="positionLevel" class="form-item">
            <span class="required-mark">*</span>
            <span>岗位档级</span>
            <el-tree-select v-model="employeeForm.positionLevel" :data="treeData" placeholder="请选择档级"
              :render-after-expand="false" clearable style="width:100%;" @change="laborage" />
          </el-form-item>
          <div class="space"></div>
          <!-- 岗位工资 -->
          <el-form-item prop="salary" class="form-item">
            <span class="required-mark">*</span>
            <span>岗位工资</span>
            <el-input v-model="employeeForm.salary" placeholder="选择档级自动填充" :disabled="true" />
          </el-form-item>
          <div class="space"></div>
          <!-- 学历 -->
          <el-form-item prop="education" class="form-item">
            <span class="required-mark">*</span>
            <span>学历</span>
            <el-select v-model="employeeForm.education" clearable placeholder="请选择学历">
              <el-option label="初中及以下" value="初中及以下" />
              <el-option label="高中/中专" value="高中/中专" />
              <el-option label="大专" value="大专" />
              <el-option label="本科" value="本科" />
              <el-option label="研究生" value="研究生" />
              <el-option label="博士" value="博士" />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 开户行 -->
          <el-form-item prop="Bank" class="form-item">
            <span class="required-mark">*</span>
            <span>开户行</span>
            <el-input v-model="employeeForm.Bank" placeholder="请输入开户行" /><!-- -->
          </el-form-item>
          <div class="space"></div>
          <!-- 银行卡号 -->
          <el-form-item prop="bankCard" class="form-item">
            <span class="required-mark">*</span>
            <span>银行卡号</span>
            <el-input v-model="employeeForm.bankCard" placeholder="输入银行卡号" maxlength="19" />
          </el-form-item>
          <div class="space"></div>
          <!-- 政治面貌 -->
          <el-form-item prop="Political" class="form-item">
            <span class="required-mark">*</span>
            <span>政治面貌</span>
            <el-select v-model="employeeForm.Political" clearable placeholder="请选择政治面貌">
              <el-option label="群众" value="群众" />
              <el-option label="团员" value="团员" />
              <el-option label="党员" value="党员" />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 公司 -->
          <el-form-item prop="company" class="form-item">
            <span class="required-mark">*</span>
            <span>公司</span>
            <el-select class="" v-model="employeeForm.company" :clearable="true" placeholder="请选择公司">
              <el-option v-for="item in companyData" :key="item.id" :label="item.account" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="space"></div>
          <!-- 项目 -->
          <el-form-item prop="Item" class="form-item">
            <span class="required-mark">*</span>
            <span>项目</span>
            <el-select class="" v-model="employeeForm.Item" :clearable="true" placeholder="请选择项目">
              <el-option v-for="item in itemList" :key="item.id" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="space"></div>
          <!-- 用工形式 -->
          <el-form-item prop="employment" class="form-item">
            <span class="required-mark">*</span>
            <span>用工形式</span>
            <el-select v-model="employeeForm.employment" clearable placeholder="请选择用工形式">
              <el-option label="长期派遣" value="1"></el-option>
              <el-option label="短期派遣" value="2"></el-option>
              <el-option label="学员" value="3"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 员工状态 -->
          <el-form-item prop="staffStatus" class="form-item">
            <span class="required-mark">*</span>
            <span>员工状态</span>
            <el-select v-model="employeeForm.staffStatus" clearable placeholder="请选择员工状态">
              <el-option label="在岗" value="1"></el-option>
              <el-option label="离职" value="2"></el-option>
            </el-select>
          </el-form-item>
          <div class="space"></div>
          <!-- 合同到期时间 -->
          <el-form-item prop="expire" class="form-item">
            <span class="required-mark">*</span>
            <span>合同到期时间</span>
            <el-date-picker v-model="employeeForm.expire" type="date" placeholder="请选择合同到期时间" format="YYYY/MM/DD"
              value-format="YYYY-MM-DD" style="width: 100%" />
          </el-form-item>
          <div class="space"></div>
          <!-- 合同期限 -->
          <el-form-item prop="deadline" class="form-item">
            <span class="required-mark">*</span>
            <span>现合同期限（年）</span>
            <el-input v-model="employeeForm.deadline" placeholder="请输入合同期限" />
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 个人社保基数 -->
          <el-form-item prop="deadline" class="form-item">
            <span class="required-mark">*</span>
            <span>个人社保基数</span>
            <el-input v-model="employeeForm.individual" placeholder="请输入个人社保基数" />
          </el-form-item>
          <div class="space"></div>
          <!-- 单位社保基数 -->
          <el-form-item prop="deadline" class="form-item">
            <span class="required-mark">*</span>
            <span>单位社保基数</span>
            <el-input v-model="employeeForm.monad" placeholder="请输入单位社保基数" />
          </el-form-item>
          <div class="space"></div>
          <!-- 入职时间 -->
          <el-form-item prop="Onboarding" class="form-item">
            <span class="required-mark">*</span>
            <span>入职时间</span>
            <el-date-picker v-model="employeeForm.Onboarding" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              placeholder="请选择入职时间" style="width: 100%" />
          </el-form-item>
        </div>
        <div class="form-row">
          <!-- 离职时间 -->
          <el-form-item prop="dimission" class="form-item">
            <span class="required-mark">*</span>
            <span>离职时间</span>
            <el-date-picker v-model="employeeForm.dimission" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
              placeholder="请选择合同到期时间" style="width: 100%" />
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="editAffirm(editFormRef)">
            确认编辑
          </el-button>
          <el-button @click="resetForm(formRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 抽屉中的回显 -->
    <el-drawer v-model="drawer" :direction="direction" size="1000px">
      <template #header>
        <h4>用户名称</h4>
      </template>
      <template #default>
        <div class="pop_body">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
              <div class="pop_title">
                <p class="message">岗位信息</p>
                <p class="edit" @click="compile()">编辑</p>
              </div>
              <el-form style="max-width: 100%" :model="message" label-width="auto" label-position="top">
                <div class="form-row">
                  <!-- 姓名输入框 -->
                  <el-form-item prop="name" class="form-item">
                    <span class="required-mark">*</span>
                    <span>姓名</span>
                    <el-input v-model="message.name" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 手机号输入框 -->
                  <el-form-item prop="phone" class="form-item">
                    <span class="required-mark">*</span>
                    <span>性别</span>
                    <el-input v-model="message.sex" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 证件号码输入框 -->
                  <el-form-item prop="idNumber" class="form-item">
                    <span class="required-mark">*</span>
                    <span>籍贯</span>
                    <el-input v-model="message.address" disabled="true" />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <!-- 性别 -->
                  <el-form-item prop="gender" class="form-item">
                    <span class="required-mark">*</span>
                    <span>学历</span>
                    <el-input v-model="message.record" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 生日 -->
                  <el-form-item prop="birthday" class="form-item">
                    <span class="required-mark">*</span>
                    <span>电话</span>
                    <el-input v-model="message.tel" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 籍贯 -->
                  <el-form-item prop="hometown" class="form-item">
                    <span class="required-mark">*</span>
                    <span>形象</span>
                    <el-input v-model="message.political_status" disabled="true" />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <!-- 岗位档级 -->
                  <el-form-item prop="positionLevel" class="form-item">
                    <span class="required-mark">*</span>
                    <span>身份证号</span>
                    <el-input v-model="message.idcard" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 岗位工资 -->
                  <el-form-item prop="salary" class="form-item">
                    <span class="required-mark">*</span>
                    <span>银行卡号</span>
                    <el-input v-model="message.bank_card" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 学历 -->
                  <el-form-item prop="education" class="form-item">
                    <span class="required-mark">*</span>
                    <span>所在公司</span>
                    <el-input v-model="message.companyid" disabled="true" />
                  </el-form-item>
                </div>

                <div class="form-row">
                  <!-- 开户行 -->
                  <el-form-item prop="Bank" class="form-item">
                    <span class="required-mark">*</span>
                    <span>用工形式</span>
                    <el-input v-model="message.layout" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 银行卡号 -->
                  <el-form-item prop="bankCard" class="form-item">
                    <span class="required-mark">*</span>
                    <span>档级</span>
                    <el-input v-model="message.gradeid" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 政治面貌 -->
                  <el-form-item prop="Political" class="form-item">
                    <span class="required-mark">*</span>
                    <span>基本工资</span>
                    <el-input v-model="message.base_pay" disabled="true" />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <!-- 公司 -->
                  <el-form-item prop="company" class="form-item">
                    <span class="required-mark">*</span>
                    <span>创建时间</span>
                    <el-input v-model="message.create_time" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 项目 -->
                  <el-form-item prop="Item" class="form-item">
                    <span class="required-mark">*</span>
                    <span>所属项目</span>
                    <el-input v-model="message.projectid" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 用工形式 -->
                  <el-form-item prop="employment" class="form-item">
                    <span class="required-mark">*</span>
                    <span>开户行</span>
                    <el-input v-model="message.bank" disabled="true" />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <!-- 员工状态 -->
                  <el-form-item prop="staffStatus" class="form-item">
                    <span class="required-mark">*</span>
                    <span>到期时间</span>
                    <el-input v-model="message.agreement_end" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 合同到期时间 -->
                  <el-form-item prop="expire" class="form-item">
                    <span class="required-mark">*</span>
                    <span>签订年数</span>
                    <el-input v-model="message.agreement_num" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 合同期限 -->
                  <el-form-item prop="deadline" class="form-item">
                    <span class="required-mark">*</span>
                    <span>密码</span>
                    <el-input v-model="message.password" disabled="true" />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <!-- 入职时间 -->
                  <el-form-item prop="Onboarding" class="form-item">
                    <span class="required-mark">*</span>
                    <span>个人社保基数</span>
                    <el-input v-model="message.gr_security" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 离职时间 -->
                  <el-form-item prop="dimission" class="form-item">
                    <span class="required-mark">*</span>
                    <span>单位社保基数</span>
                    <el-input v-model="message.dw_security" disabled="true" />
                  </el-form-item>
                  <div class="pop_space"></div>
                  <!-- 离职时间 -->
                  <el-form-item prop="dimission" class="form-item">
                    <span class="required-mark">*</span>
                    <span>入职时间</span>
                    <el-input v-model="message.entry_time" disabled="true" />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <!-- 入职时间 -->
                  <el-form-item prop="Onboarding" class="form-item">
                    <span class="required-mark">*</span>
                    <span>离职时间</span>
                    <el-input v-model="message.leave_time" disabled="true" />
                  </el-form-item>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="员工合同" name="second">员工合同</el-tab-pane>
            <el-tab-pane label="工资社保" name="third">工资社保</el-tab-pane>
            <el-tab-pane label="证书列表" name="fourth">证书列表</el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </el-drawer>

    <!-- 删除弹窗显示 -->
    <el-dialog v-model="deletePop" title="删除员工" width="500">
      <div class="delete_title">
        <img src="/src/assets/warn.png" alt="">
        <span>确定要删除这些员工吗?</span>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deletePop = false">取消</el-button>
          <el-button type="primary" @click="deleteAffirm">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue';// 引入ref和computed
import { userList, companyList, GradeList, certclassList, ItemList, staffAdd, staffEdit, deleteData } from '/@/api/login/index';//引入当前的接口封装
import type { FormInstance, FormRules, DrawerProps, TabsPaneContext } from 'element-plus'
import { ElMessage } from 'element-plus';
// 声明data为当前员工的数据
const data = ref<any[]>([]);;
// 声明pageData为渲染数据
const pageData = ref<any[]>([]);;
// 声明当前的页码
const currentPage = ref(1);
// 声明当前页面渲染的数据条数
const pageSize = ref(10);
// 声明重复人员数组
const repeat = ref<any[]>([]);
// 声明当前公司数据
const companyData = ref<any[]>([]);
// 声明当前档级数据
const Grade = ref<any[]>([]);
const treeData = ref<any[]>([]);
// 证书全部数据
const certclass = ref<any[]>([]);
// 项目全部数据
const itemList = ref<any[]>([]);

const multipleSelection = ref([]);
const selectedIds = ref<any[]>([]);
// 编辑id
const editId = ref<number | null>(null);
// 当前点击的数据
const editData = ref<any>({});

const drawer = ref(false)
const direction = ref<DrawerProps['direction']>('rtl');
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
  selectedIds.value = val.map((item: any) => item.id).filter((id: number) => id);
};

// 以下是搜索使用的输入框的值
// 姓名的输入框
const name = ref('');
// 项目名称的输入框
const itemName = ref('');
// 公司的选择
const company = ref('');
// 证书的选择
const certSearch = ref('');
// 档级的选择
const grade = ref('');
// 月份选择
const month = ref('');
// 计算分页数据
const pageCount = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return pageData.value.slice(start, end);
});

// 页码改变事件
const pageChange = (val: any) => {
  currentPage.value = val;
};

// 每页条数改变事件
const pageNum = (val: any) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置到第一页
};

// 员工列表请求
userList().then(res => {
  data.value = res.data;
  pageData.value = res.data;
  console.log(data);
  // 获取到重复人员
  for (let i in data.value) {
    for (let s in data.value) {
      if (data.value[i].name === data.value[s].name && i !== s) {
        repeat.value.push(data.value[s]); // 使用.value访问
      }
    }
  }
}).catch(err => {
  console.log(err);
});

// 公司列表接口请求
companyList().then(res => {
  console.log(res.data);
  companyData.value = res.data;
}).catch(err => {
  console.log(err);
});

// 证书接口
certclassList().then(res => {
  certclass.value = res.data;
}).catch(err => {
  console.log(err);
});

// 档级的数据获取以及整理
GradeList().then(res => {
  Grade.value = res.list;
  treeData.value = buildTreeEnhanced(res.list);
  console.log(treeData.value);
}).catch(err => {
  console.log(err);
});

// 项目列表请求接口
ItemList().then(res => {
  itemList.value = res.data
}).catch(err => {
  console.log(err);
})

// 构建二级树结构
const buildTreeEnhanced = (data: Array<{ id: number; pid: number; title: string }>, handleOrphans: boolean = false): any => {

  if (!Array.isArray(data) || data.length === 0) {
    return []; // 如果数据为空，直接返回空数组
  }

  const nodeMap: { [key: number]: any } = {};
  const tree: any[] = [];
  const orphanNodes: any[] = [];
  // 单次遍历构建树结构
  data.forEach(item => {
    // 初始化节点
    if (!nodeMap[item.id]) {
      nodeMap[item.id] = {
        value: item.id,     // 必须字段
        label: item.title,  // 必须字段
        ...item,            // 保留原始数据
        children: []        // 初始化子节点
      };
    }

    const parentNode = nodeMap[item.pid];
    if (item.pid === 0) {
      tree.push(nodeMap[item.id]); // 根节点
    } else if (parentNode) {
      parentNode.children.push(nodeMap[item.id]); // 子节点
    } else {

      orphanNodes.push(nodeMap[item.id]); // 孤儿节点
    }
  });

  return tree;
};
// 搜索函数
const searchData = () => {
  console.log();

  const filteredData = computed(() => {
    // 无搜索词时返回全部数据
    if (!name.value && !company.value && !itemName.value && !grade.value && !certSearch.value && month.value) {
      return pageData.value = data.value;
    }
    console.log(month.value);

    return data.value.filter(item => {
      // 检查每个字段是否满足相应条件（如果该搜索条件存在）
      const nameMatch = !name.value ||
        (item.name && item.name.toString().toLowerCase().includes(name.value.toLowerCase()));

      const companyMatch = !company.value ||
        (item.account && item.account.toString() === company.value.toString());

      const itemNameMatch = !itemName.value ||
        (item.title && item.title.toString().toLowerCase().includes(itemName.value.toLowerCase()));

      const gradeMatch = !grade.value ||
        (item.gradeid && item.gradeid.toString() === grade.value.toString());

      // 证书条件匹配
      const certMatch = !certSearch.value ||
        (item.certid && item.certid.some((subItem: any) =>
          subItem.certclassid === certSearch.value
        ));

      const monthMatch = !month.value || (() => {
        const itemDate = new Date(item.create_time);
        const monthValueDate = new Date(month.value);
        return itemDate.getFullYear() === monthValueDate.getFullYear() &&
          itemDate.getMonth() === monthValueDate.getMonth();
      })();

      return nameMatch && companyMatch && itemNameMatch && gradeMatch && certMatch && monthMatch;
    });
  });
  pageData.value = filteredData.value;
};
// 定义表单数据类型
interface EmployeeForm {
  // 名称
  name: string
  // 手机号
  phone: string
  // 证件号
  idNumber: string
  // 性别
  gender: string
  // 生日
  birthday: string
  // 籍贯
  hometown: string
  // 岗位档级
  positionLevel: string
  // 岗位工资
  salary: string
  // 学历
  education: string
  // 开户行
  Bank: string
  // 银行卡号
  bankCard: string
  // 政治面貌
  Political: string
  //公司
  company: string
  // 项目
  Item: string
  // 用工形式
  employment: string
  // 员工状态
  staffStatus: string
  // 合同到期时间
  expire: string
  // 合同期限
  deadline: string
  // 入职时间
  Onboarding: string
  // 离职时间
  dimission: string
  //个人社保基数
  individual: string
  // 单位社保基数
  monad: string
}

// 定义表单数据类型
interface message {
  // 名称
  name: string
  // 性别
  sex: string
  // 籍贯
  address: string
  // 学历
  record: string
  // 电话
  tel: string
  // 形象
  political_status: string
  // 身份证号
  idcard: string
  // 银行卡号
  bank_card: string
  // 公司
  companyid: string
  // 用工形式
  layout: string
  // 档级
  gradeid: string
  // 工资
  base_pay: string
  // 创建时间
  create_time: string
  // 项目id
  projectid: string
  // 开户行
  bank: string
  // 到期时间
  agreement_end: string
  // 签订年数
  agreement_num: string
  // 密码
  password: string
  // 个人社保基数
  gr_security: string
  // 单位社保基数
  dw_security: string
  // 入职时间
  entry_time: string
  // 离职时间
  leave_time: string
}

// 初始化表单数据
const employeeForm = reactive<EmployeeForm>({
  name: '',
  phone: '',
  idNumber: '',
  gender: '',
  birthday: '',
  hometown: '',
  positionLevel: '',
  salary: '',
  Bank: '',
  bankCard: '',
  Political: '',
  education: '',
  company: '',
  Item: '',
  employment: '',
  staffStatus: '',
  expire: '',
  deadline: '',
  Onboarding: '',
  dimission: '',
  individual: '',
  monad: '',
})

// 初始化表单数据
const message = reactive<message>({
  name: '',
  sex: '',
  address: '',
  record: '',
  tel: '',
  political_status: '',
  idcard: '',
  bank_card: '',
  companyid: '',
  layout: '',
  gradeid: '',
  base_pay: '',
  create_time: '',
  projectid: '',
  bank: '',
  agreement_end: '',
  agreement_num: '',
  password: '',
  gr_security: '',
  dw_security: '',
  entry_time: '',
  leave_time: '',
})

// 表单引用
const formRef = ref<FormInstance>();
const editFormRef = ref<FormInstance>();

// 添加弹窗显示状态
const dialogVisible = ref(false);
// 编辑弹窗显示状态
const editStatus = ref(false);

// 表单验证规则
const formRules = reactive<FormRules<EmployeeForm>>({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在2-10个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  idNumber: [
    { required: true, message: '请输入证件号码', trigger: 'blur' },
    {
      validator: (_, value, callback) => {
        if (!/^\d{17}[\dXx]$/.test(value)) {
          callback(new Error('证件号码格式不正确'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  hometown: [
    { required: true, message: '请输入籍贯', trigger: 'blur' }
  ],
  positionLevel: [
    { required: true, message: '请选择档级', trigger: 'blur' }
  ],
  education: [
    { required: true, message: '请选择学历', trigger: 'blur' }
  ],
  Bank: [
    { required: true, message: '请输入开户行', trigger: 'blur' }
  ],
  bankCard: [
    { required: true, message: '请输入银行卡号', trigger: 'blur' },
    { pattern: /^[0-9]{16,19}$/, message: '请输入16-19位有效卡号', trigger: 'blur' }
  ],
  Political: [
    { required: true, message: '请选择政治面貌', trigger: 'blur' }
  ],
  company: [
    { required: true, message: '请选择公司', trigger: 'blur' }
  ],
  Item: [
    { required: true, message: '请选择项目', trigger: 'blur' }
  ],
  employment: [
    { required: true, message: '请选择用工形式', trigger: 'blur' }
  ],
  staffStatus: [
    { required: true, message: '请选择员工状态', trigger: 'blur' }
  ],
  expire: [
    { required: true, message: '请选择合同到期时间', trigger: 'blur' }
  ],
  deadline: [
    { required: true, message: '请输入合同期限', trigger: 'blur' }
  ],
  Onboarding: [
    { required: true, message: '请选择入职时间', trigger: 'blur' }
  ],
})

// 身份证号输入处理
const handleIdNumberBlur = () => {
  if (employeeForm.idNumber && /^\d{17}[\dXx]$/.test(employeeForm.idNumber)) {
    // 从身份证号提取性别 (第17位，奇数为男，偶数为女)
    const genderDigit = parseInt(employeeForm.idNumber.charAt(16))
    employeeForm.gender = genderDigit % 2 === 1 ? '男' : '女'
    // 从身份证号提取生日
    const birthStr = employeeForm.idNumber.substring(6, 14)
    employeeForm.birthday = `${birthStr.substring(0, 4)}-${birthStr.substring(4, 6)}-${birthStr.substring(6, 8)}`
  } else {
    employeeForm.birthday = ''
    employeeForm.gender = ''
  }
}
// 获取到档级的工资
const laborage = () => {
  console.log(employeeForm.positionLevel);
  if (employeeForm.positionLevel) {
    for (let i = 0; i < Grade.value.length; i++) {
      if (Grade.value[i].id === employeeForm.positionLevel) {
        employeeForm.salary = Grade.value[i].money
      }
    }
  } else {
    employeeForm.salary = '';
  }
}
// 添加弹窗点击事件
const append = async (formEl: FormInstance | undefined) => {
  dialogVisible.value = true;
  editId.value = null;
  if (!formEl) return
  formEl.resetFields();
}

// 确认添加函数
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const formData = {
        name: employeeForm.name,
        tel: employeeForm.phone,
        sex: employeeForm.gender,
        idcard: employeeForm.idNumber,
        birthday: employeeForm.birthday,
        address: employeeForm.hometown,
        record: employeeForm.salary,
        projectid: employeeForm.Item,
        companyid: employeeForm.company,
        bank_card: employeeForm.Bank,
        bank: employeeForm.education,
        agreement_end: employeeForm.expire,
        agreement_num: employeeForm.deadline,
        base_pay: employeeForm.salary,
        gradeid: employeeForm.positionLevel,
        political_status: employeeForm.Political,
        layout: employeeForm.employment,
        status: employeeForm.staffStatus,
        leace_time: employeeForm.dimission,
        entry_time: employeeForm.Onboarding
      }
      staffAdd(formData).then(res => {
        if (res.code == 1) {
          ElMessage.success('添加成功');
          dialogVisible.value = false;
          // 重置表单
          formRef.value?.resetFields();
        }
      }).catch(err => {
        ElMessage.error(err);
      })
    }
  })
}
// 编辑确认函数
const editAffirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const formData = {
        id: editId.value,
        idcard: employeeForm.idNumber,
        birthday: employeeForm.birthday,
        address: employeeForm.hometown,
        record: employeeForm.education,
        bank_card: employeeForm.bankCard,
        bank: employeeForm.Bank,
        agreement_end: employeeForm.expire,
        agreement_num: employeeForm.deadline,
        political_status: employeeForm.Political,
        layout: employeeForm.employment,
        status: employeeForm.staffStatus,
        dw_security: employeeForm.monad,
        gr_security: employeeForm.individual,
        entry_time: employeeForm.Onboarding
      }
      staffEdit(formData).then(res => {
        if (res.code == 1) {
          ElMessage.success('编辑成功');
          dialogVisible.value = false;
          // 重置表单
          editFormRef.value?.resetFields();
        }
      }).catch(err => {
        ElMessage.error(err);
      })
    }
  })
}

// 清空
const resetForm = (formEl: FormInstance | undefined) => {
  dialogVisible.value = false;
  editStatus.value = false;
  if (!formEl) return
  formEl.resetFields();
}

// 如果需要暴露方法给父组件
defineExpose({
  openDialog: () => {
    dialogVisible.value = true;
    // 重置表单
    formRef.value?.resetFields();
    editFormRef.value?.resetFields();
  }
});

const activeName = ref('first');
// 选项卡点击事件
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

// 抽屉的点击事件
const locker = (data: any) => {
  drawer.value = true
  editData.value = data;
  // 公司
  message.layout = data.layout == 1 ? '长期派遣' : '2' == '2' ? '短期派遣' : '3' == '3' ? '学员' : '';
  message.name = data.name;
  message.sex = data.sex;
  message.address = data.address;
  message.record = data.record;
  message.tel = data.tel;
  message.political_status = data.political_status;
  message.idcard = data.idcard;
  message.bank_card = data.bank_card;
  message.companyid = data.account;
  message.gradeid = data.gradeid;
  message.base_pay = data.base_pay;
  message.create_time = data.create_time;
  message.bank = data.bank;
  message.agreement_end = data.agreement_end;
  message.agreement_num = data.agreement_num;
  message.password = data.password;
  message.gr_security = data.gr_security;
  message.dw_security = data.dw_security
  message.entry_time = data.entry_time;
  message.leave_time = data.leave_time;
  console.log(data.gradeid);
  // 档级
  for (let i = 0; i < Grade.value.length; i++) {
    if (Grade.value[i].id == data.gradeid) {
      message.gradeid = Grade.value[i].title;
    }
  }
  // 项目
  for (let j = 0; j < itemList.value.length; j++) {
    if (itemList.value[j].id == data.projectid) {
      message.projectid = itemList.value[j].title;
    }
  }
}
// 编辑函数
const compile = () => {
  editStatus.value = true;
  editId.value = editData.value.id; // 保存编辑的ID
  // 数据映射（回显）
  employeeForm.name = editData.value.name;
  employeeForm.phone = editData.value.tel;
  employeeForm.idNumber = editData.value.idcard;
  employeeForm.gender = editData.value.sex;
  employeeForm.birthday = editData.value.birthday;
  employeeForm.hometown = editData.value.address;
  employeeForm.salary = editData.value.base_pay;
  employeeForm.Bank = editData.value.bank;
  employeeForm.bankCard = editData.value.bank_card;
  employeeForm.Political = editData.value.political_status;
  employeeForm.education = editData.value.record;
  employeeForm.company = editData.value.account;
  employeeForm.employment = editData.value.layout.toString(); // 用工形式
  employeeForm.staffStatus = editData.value.status.toString(); // 员工状态
  employeeForm.expire = editData.value.agreement_end;
  employeeForm.Onboarding = editData.value.entry_time;
  employeeForm.dimission = editData.value.leave_time;
  // 档级
  for (let i = 0; i < Grade.value.length; i++) {
    if (Grade.value[i].id == editData.value.gradeid) {
      employeeForm.positionLevel = Grade.value[i].title;
    }
  }
  // 项目
  for (let j = 0; j < itemList.value.length; j++) {
    if (itemList.value[j].id == editData.value.projectid) {
      employeeForm.Item = itemList.value[j].title;
    }
  }
}

const deletePop = ref(false);
// 删除弹窗显示
const deletePopShow = () => {
  if (selectedIds.value.length == 0) {
    ElMessage.warning('请选择要删除的数据');
  } else {
    deletePop.value = true;
  }
}
// 确认删除
const deleteAffirm = () => {
  deleteData(selectedIds.value.join(',')).then(res => {
    if (res.code == 1) {
      ElMessage.success('删除成功');
      deletePop.value = false;
      userList();
    }
  }).catch(err => {
    ElMessage.error(err);
  })
}

</script>

<style scoped>
.body {
  padding: 20px;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}

.title {
  font-weight: 400;
  font-size: 25px;
}

.btn_box {
  width: 100%;
  display: flex;
  align-items: center;
}

.user_name {
  color: rgb(33, 81, 197);
  cursor: pointer;
}

.btn_item {
  color: white;
  background-color: #F56E6E;
}

.btn_size {
  width: 70px;
  height: 35px;
  font-size: 15px;
}

.btn_box_btn {
  width: 40%;
  display: flex;
  justify-content: space-around;
}

.input_box {
  width: 85%;
  display: flex;
  margin-top: 15px;
  justify-content: space-between;
}

.element_input,
.element_select,
.element_time {
  width: 15%;
}

.search_box {
  display: flex;
  align-items: end;
  margin-bottom: 10px;
}

.new_btn {
  margin-left: 5%;
  background-color: #0052CC;
  border: 1px solid #0052CC;
}

.new_btn:hover {
  background-color: #4d82d1;
  border: 1px solid #4d82d1;
}

.new_btn:active {
  background-color: #00388b;
  border: 1px solid #00388b;
}

.page_box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom_box {
  width: 100%;
  height: 30px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.info {
  color: rgb(33, 81, 197);
  cursor: pointer;
}

.form-row {
  display: flex;
  margin-bottom: 10px;
}

.form-item:last-child {
  margin-right: 0;
}

.form-item {
  width: 30%;
  display: flex;
  align-items: center;
  margin: 0 !important;
}

.space {
  width: 3%;
}

.pop_space {
  width: 5%;
}

.required-mark {
  color: red;
}

.label {
  width: 80px;
  text-align: right;
}

.pop_body {
  padding: 20px;
}

.pop_title {
  display: flex;
  margin: 10px 0px;
  justify-content: space-between;
}

.message {
  font-weight: bold;
}

.edit {
  cursor: pointer;
  color: rgb(114, 113, 113);
}

.edit:hover {
  color: rgb(151, 151, 151);
}

.delete_title {
  display: flex;
}

.delete_title img {
  width: 20px;
  margin-right: 10px;
}
</style>